<template>
	<view class="wrap">
		<view class="top">
			<view class="item">
				<view class="left">收货人</view>
				<input type="text" placeholder-class="line" v-model="name" placeholder="请填写收货人姓名" />
			</view>
			<view class="item">
				<view class="left">手机号码</view>
				<input type="text" placeholder-class="line" v-model="pone" placeholder="请填写收货人手机号" />
			</view>

			<view class="item address">
				<view class="left">详细地址</view>
				<textarea type="text" placeholder-class="line" v-model="dizhi" placeholder="街道、楼牌等" />
			</view>

		</view>
		<view class="bottom">
			<button class="tips" @click="godz()">修改地址</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: "",
				pone: "",
				dizhi: "",
				show: false,
				id:''
			};
		},
		onLoad(e) {
			this.id=e.id
			this.name=e.name
			this.pone=e.phone
			this.dizhi=e.address
		},
		methods: {
			async godz(id) {
				console.log(this.vuex_userid)
				const {
					data: res
				} = await this.$http(`/userInfo/${this.id}`, "put", this.vuex_token, {
					address: this.dizhi,
					phone: this.pone,
					name: this.name,
					user_id: this.vuex_userid
				})
				console.log(res)
				uni.navigateBack({
				    delta: 1
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	/deep/ .line {
		color: $u-light-color;
		font-size: 28rpx;
	}

	.wrap {
		background-color: #f2f2f2;

		.top {
			background-color: #ffffff;
			border-top: solid 2rpx $u-border-color;
			padding: 22rpx;

			.item {
				display: flex;
				font-size: 32rpx;
				line-height: 100rpx;
				align-items: center;
				border-bottom: solid 2rpx $u-border-color;

				.left {
					width: 180rpx;
				}

				input {
					text-align: left;
				}
			}

			.address {
				padding: 20rpx 0;

				textarea {
					// width: 100%;
					height: 150rpx;
					background-color: #f7f7f7;
					line-height: 60rpx;
					margin: 40rpx auto;
					padding: 20rpx;
				}
			}

			.site-clipboard {
				padding-right: 40rpx;

				textarea {
					// width: 100%;
					height: 150rpx;
					background-color: #f7f7f7;
					line-height: 60rpx;
					margin: 40rpx auto;
					padding: 20rpx;
				}

				.clipboard {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					color: $u-tips-color;
					height: 80rpx;

					.icon {
						margin-top: 6rpx;
						margin-left: 10rpx;
					}
				}
			}
		}

		.tips {
			font-size: 24rpx;
			background-color: #f10215;
			width: 300rpx;
			height: 80rpx;
			color: #fff;
			line-height: 80rpx;
		}

		.bottom {
			margin-top: 20rpx;
			padding: 40rpx;
			padding-right: 0;
			background-color: #ffffff;
			font-size: 28rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
